import React, {Component} from 'react';
import {
    Text,
    View,
    StyleSheet,
    Image,
    TouchableOpacity
} from 'react-native';
import {scaleSize} from '../../utils/screen';
import FontText from '../components/FontText';
import { i18n } from '../../i18n';

export default class Castles extends Component {
    render() {
        return (
            <View style = {styles.container}>
                <View style = {styles.header}>
                    <Image style = {styles.payIcon} source = {require("../../access/imgs/pay_icon.png")} />
                    <View style = {styles.titleBox}>
                        <FontText font = {'book'} style = {styles.title}>{i18n.t("store.castles.title")}</FontText>
                        <FontText font = {'book'} style = {styles.tips}>{i18n.t("store.castles.tips")}</FontText>
                    </View>
                </View>
                <View style = {styles.castlesBox}>
                    <View style = {styles.castlesContent}>
                        <Image style = {styles.cartRender} source = {require("../../access/imgs/card_render.png")} />
                        <View style = {styles.creditRender}>
                            <FontText style = {styles.creditRenderText} font = {'book'}>{i18n.t("store.castles.creditrender")}</FontText>
                        </View>
                        <View style = {styles.creditRender}>
                            <TouchableOpacity
                                activeOpacity = {0.8}
                                onPressIn = {()=>this.back()}
                                style = {styles.backBox}
                                >
                                <FontText style = {[styles.creditRenderText,{color:"#9b9b9b"}]} font = {'medium'}>{i18n.t("btns.cancel")}</FontText>
                            </TouchableOpacity>
                        </View>
                    </View>
                </View>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container:{
        flex:1
    },
    header:{
        height:scaleSize(250),
        backgroundColor: "#fd265d",
        flexDirection: 'row',
        alignItems:"center",
        justifyContent:"center"
    },
    payIcon:{
        width:scaleSize(71),
        height:scaleSize(100)
    },
    titleBox:{
        paddingLeft:scaleSize(40),
        alignItems:"center"
    },
    title:{
        fontSize:scaleSize(60),
        color:"#fff"
    },
    tips:{
        color:"#fff",
        fontSize:scaleSize(36)
    },
    castlesBox:{
        flex:1,
        justifyContent:"center",
        alignItems:"center"
    },
    castlesContent:{

    },
    cartRender:{
        width:scaleSize(494),
        height:scaleSize(494)
    },
    creditRender:{
        height:scaleSize(120),
        justifyContent:"center",
        alignItems:"center"
    },
    creditRenderText:{
        color:"#cfa972",
        fontSize:scaleSize(30)
    },
    backBox:{
        backgroundColor: "#eeeeee",
        height:scaleSize(80),
        width:scaleSize(210),
        justifyContent:"center",
        alignItems:"center",
        borderRadius:scaleSize(40)
    }
})